<template>
  <div class="base-info-container">
    <div class="base-info-title">
      <span>{{baseInfo.title}}</span>
    </div>
    <div class="base-info-price">
      <span class="price">{{baseInfo.price}}</span>
      <span class="oldPrice">{{baseInfo.oldPrice}}</span>
      <span v-show="baseInfo.discountDesc" class="discount-desc">{{baseInfo.discountDesc}}</span>
    </div>
    <div class="base-info-columns">
      <span v-for="(item,index) of baseInfo.columns" :key="index">
        {{item}}
      </span>
    </div>
    <div class="base-info-promise">
      <div v-for="(item,index) of promiseArr">
        <van-icon :name="item.name"></van-icon>
        <span>{{item.desc}}</span>
      </div>
    </div>
    <van-divider></van-divider>
  </div>
</template>

<script>

  export default {
    name: "DetailBaseInfo",
    data() {
      return {
        promiseArr: [
          {
            name: "smile-o",
            desc: "延误必赔"
          }, {
            name: "balance-o",
            desc: "退货补运费"
          }, {
            name: "free-postage",
            desc: "全国包邮"
          }, {
            name: "logistics",
            desc: "7天无理由退货"
          },
        ]
      }
    },
    props: {
      baseInfo: {
        type: Object,
        default() {
          return {};
        }
      }
    }
  }
</script>

<style scoped>
  .base-info-container {
    padding-top: 10px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 10px;
  }

  .base-info-title {
    font-size: 18px;
    color: #000000;
    margin-bottom: 10px;

    /**
    文字只显示两行
    思路：
      1.超出的文本隐藏
      2.溢出用省略号显示
      3.溢出不换行
      4.将对象作为弹性伸缩盒子模型显示
      5.从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
      6.这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数
  */
    /*width: 100%;*/
    /*word-break: break-all;*/
    /*display: -webkit-box;*/
    /*-webkit-line-clamp: 2;*/
    /*-webkit-box-orient: vertical;*/
    /*overflow: hidden;*/
  }

  .base-info-price {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }

  .base-info-price .price {
    color: var(--color-tint);
    font-size: 26px;
    margin-right: 6px;

  }

  .base-info-price .oldPrice {
    color: #AAAAAA;
    text-decoration: line-through;
    margin-right: 6px;
  }

  .base-info-price .discount-desc {
    background-color: var(--color-tint);
    color: white;
    font-size: 10px;
    border-radius: 8px;
    padding: 3px;
  }

  .base-info-columns {
    color: #888888;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
  }

  .base-info-promise {
    font-size: 14px;
    display: flex;
    justify-content: space-between;
  }


</style>
